<template>
<div>
    <ul>
        <li v-for="item in list">
        <p>姓名：{{ item.name }}</p>
        <p>年龄：{{ item.age }}</p>
        </li>
    </ul>
    <table border="1" style="text-align: center;">
        <tr style="background-color: aqua;">
            <td>用户借款编号</td>
                <td>借款用户账号</td>
                <td>借款款项名称</td>
                <td>借款金额</td>
                <td>剩余还款本金</td>
        </tr>
        <tr v-for="item in blist" >
            <td>{{ item.id }}</td>
            <td>{{ item.userId }}</td>
            <td>{{ item.userName }}</td>
            <td>{{ item.money }}</td>
            <td>{{ item.bmoney }}</td>
        </tr>
    </table>
    <input type="text" v-model="s"  />
    <p>{{ s }}</p>
</div>
</template>

<script setup lang="ts">

import {reactive,ref,toRefs} from 'vue'
const s=ref("双向数据绑定演示哈哈哈哈");
let data=reactive({
    list:[
        {name:"张阿三",age:20},
        {name:"张阿si",age:20},
        {name:"张阿wu",age:20},
        {name:"张阿liu",age:20},
        {name:"张阿qi",age:20}
    ],
    blist:[
    {id:1,userId:'张三',userName:'八维助学金',money:5000,bmoney:2000},
    {id:1,userId:'李四',userName:'八维助学金',money:2000,bmoney:1000},
    {id:1,userId:'王五',userName:'八维助学金',money:1900,bmoney:0},
    {id:1,userId:'赵六',userName:'八维助学金',money:2000,bmoney:1000},
    ]
})
let {list,blist} =toRefs(data)
</script>

<style>
ul{
    list-style: none;
}
li{
    margin-bottom: 20px;
}
</style>